﻿<div class="body-text">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3 hidden-phone">
				         	<!-- // MORTGAGE CALCULATOR // -->
							<div class="qbox width-js">
				            	<h3><i class="icon-bar-chart pull-right"></i>Mortgage Calculator</h3>
								<form name="temps" class="mortcalc" >
									<div class="calculation-js">
										<ul>
											<li>
												<label>Years:</label>
												<input type="text" name="YR" size="6" value="30" />
											</li>
											<li>
												<label>Interest:</label>
												<input type="text" name="IR" size="6" value="8.0" />
											</li>
											<li>
												<label>Loan mount:</label>
												<input type="text" name="LA" size="6" value="100000" />
											</li>
											<li>
												<label>Tax / yr:</label>
												<input type="text" name="AT" size="6" value="1000" />
											</li>
											<li>
												<label>Insurance / yr:</label>
												<input type="text" name="AI" size="6" value="300" />
											</li>
										</ul>
										<a href="javascript:void(0);" class="btn btn-small calculate-btn-js">Calculate</a>
									</div>
									
									<div class="results results-js">
										<p>Monthly Principal + Interest:</p>
										<input type="text" name="PI" size="10" class="disabled" />
									
										<p>Monthly Tax:</p>
										<input type="text" name="MT" size="10" class="disabled" />
									
										<p>Monthly Insurance: </p>
										<input type="text" name="MI" size="10" class="disabled" />
									
										<p>Total Payment: </p>
										<input type="text" name="MP" size="10" class="disabled" />
										
										<a href="javascript:void(0);" class="btn btn-small recalculate-btn-js"><i class="icon-refresh"></i>Re-Calculate</a>
										<p class="disclaimer">
											**The information contained on this page is for estimation purposes only. Payment amounts must be obtained from your mortgage lender. Peach Realestate has no liability for the accuracy of the information contained on this page.
										</p>
									</div>
								</form>
				            </div>
				            <!-- end Mortgage Calculator -->
				            <!-- zone alert -->
				        	<div class="qbox">
				            	<h3><i class="icon-eye-open pull-right"></i>Zone Alert</h3>
				                <p>Register your criteria and Property Alert will let you know when properties are listed.</p>
				                <div>
				                    <button class="btn btn-small">Register</button>
				                </div>
				            </div>
				            <!-- end zone alert -->
						</div>
            <div class="span6 listing-js">

                <!-- page heading -->
                <h1>Latest Listings</h1>
                <div class="container-fluid">
                    <div class="row-fluid">
                        <!-- ko if: cars().length > 0 -->
                        <div class="span7 dropdown-results">
                            <p>
                                Showing <span data-bind="text: currentlyViewed()"></span> of <span data-bind="    text: totalRecords()"></span> result(s)
                            </p>
                        </div>
                        <div class="span5">
                            <select id="sort" name="sort">
                                <option value="pmrank">Sort by Popularity</option>
                                <option value="price">Sort by Price: Low to High</option>
                                <option value="-price">Sort by Price: High to Low</option>
                            </select>
                        </div>
                        <!-- /ko -->
                    </div>
                </div>
                <!-- end page heading -->

                <!-- create listing for rent -->
                
                
                
                <!-- ko if: cars().length <= 0 -->
                  <div class="container-fluid">
                      <div class="row-fluid">
                          <div class="span4">
                              <p>No Results found</p>
                          </div>
                      </div>
                    </div>
                <!-- /ko -->
                <!-- ko if: cars().length > 0 -->
                    <!-- ko foreach: cars -->
                    <div class="container-fluid">
                        <div class="row-fluid">
						        <div class="span4">
						            <a>
						                <img data-bind="attr: { src: image()[0].imageName }" />
						            </a>
						        </div>
                                <div class="span8">
                                    <a class="prop-title" data-bind="text: name"></a>
                                    <p class="size">Bedrooms: 2 • Bathrooms: 1 • Parking 2</p>
                                    <p class="price" data-bind="text: priceFormated"></p>
                                    <p class="description">
                                        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. 
                                    </p>
                                    <!-- Short List Btns -->
                                    <ul class="list-btns view-link">
                                        <li><a ><i class="icon-info-sign"></i>View Details</a></li>
                                    </ul>
                                    <!-- end short list -->
                                </div>
                        </div>
                    </div>
                    <!-- /ko -->
                <!-- /ko -->
                <!-- end map plot-->

                <!--begin paging-->
                <!-- ko if: totalPages() > 1 -->
                <div class="container-fluid">
                    <div class="row-fluid" style="border: none;">
                        <div class="span12">
                            <div class="pagination pagination-centered">
                                <ul class="pagination-lg">
                                    <li data-bind="css: { active: currentPage() > 0 ? false : true }"><a href="#" data-bind="    click: previous">Prev</a></li>
                                    <!-- ko foreach: allPages -->
                                    <li data-bind="css: { active: pageNumber === $parent.currentPage() + 1 }">
                                        <a href="#" data-bind="text: pageNumber, click: $parent.moveToPage"></a>
                                    </li>
                                    <!-- /ko -->
                                    <li data-bind="css: { active: currentPage() < totalPages() - 1 ? false : true }"><a href="#" data-bind="    click: next">Next</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /ko -->
                <!-- end paging -->

            </div>
            <div class="span3">
                <!--
                    "Quick Search" Widget
								
                    SPECIAL NOTE: Please leave the inline style for <Select></Select> "width:100%",
                    the width is automatically "Re-adjusted" with javascript
                    See "config.js" for more details	
                    -->
                <div class="qbox">
                    <h3><i class="icon-search pull-right"></i>Quick Search</h3>
                    <form />
                    <div>
                        <label>Property Type</label>
                        <select data-placeholder="-- For Sale --" class="chzn-select" style="width: 100%;" tabindex="0">
                            <option value="ForSale">For Sale</option>
                            <option value="ForRent">For Rent</option>
                            <option value="CommercialSale">Commercial For Sale</option>
                            <option value="CommercialLease">Commercial For Lease</option>
                        </select>
                    </div>
                    <div>
                        <label>Select Province</label>
                        <select data-placeholder="-- Select Province --" class="chzn-select" style="width: 100%;" tabindex="1">
                            <option value="Ontario">Ontario</option>
                            <option value="Quebec">Quebec</option>
                            <option value="Nova Scotia">Nova Scotia</option>
                        </select>
                    </div>
                    <div>
                        <label>Select a suburb</label>
                        <select data-placeholder="-- Available Cities --" multiple="multiple" class="chzn-select" style="width: 100%;" tabindex="2">
                            <option value="Guelph">Guelph</option>
                            <option value="Haldimand">Haldimand</option>
                            <option value="Halton Hills">Halton Hills</option>
                        </select>
                    </div>
                    <button class="btn btn-inverse btn-small">Search</button>
                </div>
            </div>
        </div>

    </div>

</div>
			
